<template>
    <div>
        <div class="tabs" scroll-x>
            <p v-for="(item, index) in types" 
                @click="changeImgType(item, index)"
                :class="{active: actTypeIndex == index}" 
                :key="index">{{item}}</p>
        </div>
        <div class="list_con">
            <div class="img_list">
                <div class="img_item" v-for="(item, index) in imgList" :key="index">
                    <image 
                        @click="editImg(item)"
                        :class="{active: item.id == actImgId}" 
                        :src="item.materialURL" mode="" />
                    <span>{{item.type}}</span>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
            <!-- <scroll-view class="img_list_view" scroll-y @scrolltolower="scrolltoBottom"> </scroll-view> -->
        </div>  
        <div class="btn add_new_btn" @click="addNewImg">新建素材</div>
        <uni-popup ref="editImgInfo" type="bottom">
            <div class="edit_img">
                <div class="title">编辑素材</div>
                <div class="cell">
                    <div class="cell_item">
                        <span class="label">图片</span>
                        <div class="value up_img">
                            <pub-upload-img v-model="edit.materialURL"></pub-upload-img>
                            <span class="color-red mar-t5 fs24">上传图片必须为正方形</span>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">排序</span>
                        <div class="value">
                            <input type="text" v-model="edit.sortNo" placeholder="请输入排序数字" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">素材类别</span>
                        <div class="value">
                            <picker mode="selector" :range="types" @change="typesChange">
                                <div class="w400 flex-v-center flex-end">
                                    <span>{{edit.jrjqFlag == '01' ? '节日节气' : '日常'}}</span>
                                </div>
                            </picker>
                        </div>
                    </div>
                    <div class="cell_item" v-if="edit.jrjqFlag == '01'">
                        <span class="label">素材名称</span>
                        <div class="value">
                            <picker mode="selector" :range="festivalList" @change="festivalChange">
                                <div class="w400 flex-v-center flex-end">
                                    <span :class="{placeholder: !edit.type }">{{edit.type || '请选择'}}</span>
                                </div>
                            </picker>
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">文案</span>
                        <div class="value">
                            <textarea maxlength="-1" v-model="edit.defaultText" placeholder="请输入素材文案" placeholder-class="placeholder"></textarea>
                        </div>
                    </div>
                </div>
                <div class="btns">
                    <div v-if="edit.id" class="delete_btn btn" @click="deleteItem">删除</div>
                    <div class="save_btn btn" @click="saveSubmit">保存</div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>

<script>
import { getImgMateriaList, editSysMateria } from '@/request/respect'
export default {
    data() {
        return {
            actTypeIndex: 0,
            types: [ '日常', '节日节气' ],
            festivalList: [ '元旦', '春节', '元宵节', '劳动节', '端午节', '中秋节', '国庆节', '圣诞节', '立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪', '冬至', '小寒', '大寒', ],
            actImgId: '',
            imgList: [],
            scroll: {
                page: 1,
                size: 100,
                loading: false,
                max: false,
                noData: false,
            },
            edit: {
                materialURL: '',
                sortNo: '',
                jrjqFlag: '00',
                defaultText: '',
                type: '',
            }

        }
    },
    onLoad() {
        this.changeImgType(this.types[0], 0)
        setTimeout(() => {
            // this.$refs.editImgInfo.open()
        })
    },
    onReachBottom() {
        this.onInfinite()
    },
    
    methods: {
        changeImgType(item, index) {
            if(index !== undefined) {
                this.actTypeIndex = index
            }
            this.onRefresh()
        },
        getImgList(complete) {            
            getImgMateriaList({
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
                jrjqFlag: this.types[this.actTypeIndex] == '节日节气' ? '01' : '00',
            }, { complete }).then(res => {
                this.imgList = this.scroll.page == 1 ? res.data.list : this.imgList.concat(res.data.list)
                this.scroll.max = this.imgList.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.imgList = []
            this.getImgList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getImgList(() => {
                this.scroll.loading = false
            })
        },
        typesChange(e) {
            let index = e.detail.value
            if(this.types[index] == '节日节气') {
                this.edit.jrjqFlag = '01'
            } else {
                this.edit.jrjqFlag = '00'
            }
        },
        festivalChange(e) {
            let index = e.detail.value
            this.edit.type = this.festivalList[index]
        },
        editImg(item) {
            this.edit = { ...item }
            this.$refs.editImgInfo.open()
        },
        addNewImg() {
            this.edit = {
                materialURL: '',
                sortNo: '',
                jrjqFlag: '00',
                defaultText: '',
                type: '',
            }
            this.$refs.editImgInfo.open()
        },
        deleteItem() {
            this.$interact.modal({
                title: '提示',
                content: '是否删除素材',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    editSysMateria({
                        id: this.edit.id,
                        delStatus: '01'
                    }).then(res => {
                        this.$interact.toast(res.msg)
                        this.onRefresh()
                        this.$refs.editImgInfo.close()
                    })
                }
            })
        },
        saveSubmit() {
            editSysMateria({
                id: this.edit.id || void 0,
                materialURL: this.edit.materialURL,
                sortNo: this.edit.sortNo,
                jrjqFlag: this.edit.jrjqFlag || '00',
                defaultText: this.edit.defaultText || '',
                type: this.edit.type,
            }).then(res => {
                this.$interact.toast(res.msg)
                this.onRefresh()
                this.$refs.editImgInfo.close()
            })
        }
    }
}
</script>

<style lang="less" scoped>

    .tabs{
        width: 100%;
        height: 90rpx;
        background: #fff;
        display: flex;
        p{
            flex: 1;
            height: 90rpx;
            text-align: center;
            font-size: 30rpx;
            line-height: 80rpx;
            position: relative;
            color: #666;
            padding: 0 20rpx;
            &.active{
                font-weight: bold;
                color: @mainColor;
                border-bottom: 1px solid currentColor;
            }
        }
    }
    .list_con{
        width: 100%;     
        margin-top: 10rpx;   
        // padding-bottom: 120rpx;
        padding: 20rpx 0 120rpx 24rpx;
        background: #fff;
        .img_list{
            display: flex;
            flex-wrap: wrap;
            .img_item{
                width: 235rpx;
                // height: 235rpx;
                margin-bottom: 30rpx;
                .align(center);
                image{
                    width: 210rpx;
                    height: 210rpx;
                }
                span{
                    width: 100%;
                    font-size: 26rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    text-align: center;
                    display: block;
                }
                .active{
                    border: 1px solid @mainColor;
                }
            }
        }
        // .img_list_view {
        //     flex: 1;
        //     height: 100%;
        //     background: #fff;
        //     padding: 20rpx;

        // }

    }

    .btn{
        color: #FFF;
        background: @mainColor;
        border-radius: 45rpx;
        .align(center, column);

    }
    .add_new_btn{
        position: fixed;
        bottom: 40rpx;
        left: 30rpx;
        font-size: 34rpx;
        width: 690rpx;
        height: 90rpx;

    }
    .edit_img{
        width: 100%;
        background: #fff;
        border-radius: 30rpx 30rpx 0 0;
        .title{
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
            color: #666;
        }
        .cell{
            padding: 20rpx 30rpx;
            .cell_item{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 80rpx;
                border-bottom: 1rpx solid #eee;
                padding: 10rpx 20rpx;
                font-size: 28rpx;
                .label{
                    width: 200rpx;
                    color: #666;
                }
                .up_img{
                    width: 500rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                }
                input{
                    text-align: right;
                }
                textarea{
                    width: 500rpx;
                    height: 200rpx;
                    border: 1rpx solid #eee;
                    border-radius: 10rpx;
                    margin: 10rpx 0;
                    padding: 10rpx;
                }
            }
        }
        .btns{
            display: flex;
            padding: 30rpx;
            justify-content: space-between;
            .delete_btn{
                width: 200rpx;
                height: 80rpx;
                background: red;
                margin-right: 30rpx;
            }
            .save_btn{
                flex: 1;
                height: 80rpx;
            }
        }


    }


</style>